html{
    box-sizing: border-box;
    
    
}
.header{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #34eb52;
}
.details{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #34eb52;
}
.navbar_zeilen a{
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-size: 16px;
    color: black;
    text-align: center;
}
.navbar_zeilen_klein{
    padding: 5px;
}
.navbar_zeilen_klein:hover{
    background-color: aliceblue;
}
.bild{
    display: none;
    visibility: hidden;
    position: absolute;
    top: 0em;
    left: 0em;
}
.willkommens_text{
    font-family: Arial, Helvetica, sans-serif;
    border: 2px solid #34eb52;
    text-align: center;
    padding: 8px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    width:21em;
    top: -1.8em;
}
.willkommen_homepage{
    
    font-size: 20px;
    position: relative;
    top: 0px;
    
    width: 16em;
    background-color: white;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;

}
.beliebte{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
.beliebteliste a{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
    color: black;

}

    
    

.beliebteliste li{
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px;
    background-color: #34eb52;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 12em;

    
}
div {
    overflow-x: hidden;
}
.beliebteliste li:hover{
    background-color: aliceblue;
}

.footer{
    background: linear-gradient(to bottom, white, #34eb52);
    margin-top: 6em;
    height: 12;
    clear: both;
    

}
.Anschrift{
    width: 25vw;
    
    margin: 5px;
    
}
#impressum {
    
    width: 25vw;
    margin: 5px;
    

}
.abstandimpressum{
    
    width: 25vw;
    margin: 5px;
    
    
}

.A{
    text-decoration: none;
    font-size: 2em;
}
#mySearch {
    font-family: Arial, Helvetica, sans-serif;
    width: 20vw;
    font-size: 18px;
    padding: 11px;
    border: 2px solid black;
    position: relative;
    
    
    
}
.flooter{
    float: left;
    margin-right: 10vw;

}
  
  /* Style the navigation menu */
#myMenu {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #34eb52;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 40vw;
    
    
}
  
  /* Style the navigation links */
#myMenu li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    padding: 12px;
    text-decoration: none;
    color: black;
    display: block
    
}
  
#myMenu li a:hover {
    background-color: #eee;
}
.Liste{
    font-family: Arial, Helvetica, sans-serif;
    float: left;

    
    width: 30vw;

}
.Liste a{
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    
}

/*StudiengangSeite8*/
.studiengangname{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    width: 70vw;
    font-size: 6vw;
    background-color: white;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 1.2em;
    text-decoration: underline #34eb52;

}
.beschreibung{
    font-family: Arial, Helvetica, sans-serif;
    border: 2px solid #34eb52;
    text-align: center;
    padding: 2em;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    width:70vw;

}
.bildbuch1{
    font-family: Arial, Helvetica, sans-serif;
    visibility: visible;
    width: 100%;
    max-width: 30vw;
    height: auto;

}
.buch1{
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px dashed black;
    position: relative;
    left: 0vw;
    width: 40vw;

    margin-left: auto;
    margin-right: auto;
}
.buch1 dt{
    margin: 5px;
}
.bildbuch2{
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px dashed black;
    visibility: visible;
    width: 100%;
    max-width: 30vw;
    height: auto;

}
.buch2{
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px dashed black;
    position: relative;
    left: 0vw;
    width: 40vw;

    margin-left: auto;
    margin-right: auto;
}
.bildbuch3{
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px dashed black;
    visibility: visible;
    width: 100%;
    max-width: 30vw;
    height: auto;

}
.buch3{
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px dashed black;
    position: relative;
    left: 0vw;
    width: 40vw;

    margin-left: auto;
    margin-right: auto;
}



@media screen and (min-width: 40em) {
    
    .willkommens_text{
        margin-left: 0em;
        margin-right: 0em;
        font-size: 1.3em;
    
        border: 2px solid #34eb52;
        padding: 8px;
        position: relative;
        left: 1em;
        z-index: 1;
        width: calc(100vw - 40vw);
        top: -1.8em;
    }
    .willkommen_homepage{
        margin-left: 0em;
        margin-right: 0em;
        font-size: 1.6em;
        position: relative;
        top: 0px;
        left: calc(50vw - 37vw);
        
        width: 16em;
        background-color: white;
        z-index: 2;
        
    
    }
    .beliebte{
        position: relative;
        margin-left: 0em;
        margin-right: 0em;
        left: 70vw;
        top: -7em;
        width: 15vw;
        
        
    }
    .beliebteliste a{
        text-align: center;
        text-decoration: none;
        color: black;
    
    }
    
        
        
    
    .beliebteliste li{
        padding: 5px;
        background-color: #34eb52;
        position: relative;
        margin-left: 0em;
        margin-right: 0em;
        left: 70vw;
        top:  -10em;
        width: 15vw;
        
    }
    .bild{
        display: block;
        visibility: visible;
        width: 100%;
        max-width: 45vw;
        height: auto;
        position: relative;
        top: -25em;
        left: 5vw;
    }
    .A{
        text-decoration: none;
        font-size: 2em;
    }
    #mySearch {
        width: 20vw;
        font-size: 18px;
        padding: 11px;
        border: 2px solid rgb(11, 4, 4);
        
        
    }
      
      /* Style the navigation menu */
    #myMenu {

        background-color: #34eb52;
        list-style-type: none;
        padding: 0;
        margin: 0;
        width: 25vw;
        
        
        
        
    }
      
      /* Style the navigation links */
    #myMenu li a {
    
        padding: 12px;
        text-decoration: none;
        color: black;
        display: block
        
    }
      
    #myMenu li a:hover {
        background-color: #eee;
    }
    .Liste{
    
        
        
        top: 0em;
        width: 30vw;
    
    }
    .Liste a{
        text-decoration: none;
    }
    
    /*StudiengangSeite8*/

    
    .studiengangname{
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        width: 50vw;
        font-size: 2em;
        background-color: white;
        z-index: 2;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        top: 1.2em;
        text-decoration: underline #34eb52;
    }
        


    .beschreibung{
        font-family: Arial, Helvetica, sans-serif;
        border: 2px solid #34eb52;
        text-align: center;
        padding: 2em;
        margin-left: auto;
        margin-right: auto;
        z-index: 1;
        width:70vw;

    }
    .bildbuch1{
        font-family: Arial, Helvetica, sans-serif;
        visibility: visible;
        width: 100%;
        max-width: 15vw;
        height: auto;
        

    }
    .buch1{
        font-family: Arial, Helvetica, sans-serif;
        border-bottom: 1px dashed black;
        
        position: relative;
        left: 5vw;
        top: 0em;
        width: 20vw;
        float: left;
        margin-left: 0em;
        margin-right: 0em;
        

    }

    .buch1 dt{
        margin: 5px;
    }
    .bildbuch2{
        font-family: Arial, Helvetica, sans-serif;
        border-bottom: 1px dashed black;
        visibility: visible;
        width: 100%;
        max-width: 15vw;
        height: auto;

    }
    .buch2{
        font-family: Arial, Helvetica, sans-serif;
        border-bottom: 1px dashed black;
        position: relative;
        left: 10vw;
        top: 0em;
        width: 20vw;
        float: left;
        margin-left: 0em;
        margin-right: 0em;
    }
    .bildbuch3{
        font-family: Arial, Helvetica, sans-serif;
        border-bottom: 1px dashed black;
        visibility: visible;
        width: 100%;
        max-width: 15vw;
        height: auto;


    }
    .buch3{
        font-family: Arial, Helvetica, sans-serif;
        border-bottom: 1px dashed black;
        position: relative;
        left: 15vw;
        top: 0em;
        width: 20vw;
        float: left;
        margin-left: 0em;
        margin-right: 0em;
        
    }
    .Anschrift{
        width: 25vw;
        float: left;
        margin: 5px;
        padding-top: 3em;
    }
    #impressum {
        float: left;
        width: 25vw;
        margin: 5px;
        padding-top: 3em;
    
    }
    .abstandimpressum{
        padding-top: 3em;
        
        float: left;
        width: 25vw;
        margin: 5px;
    }
    .footer{
        
        background: linear-gradient(to bottom, white, #34eb52);
        
        height: 8em;
    }


     
}
